<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set value="${pageContext.request.contextPath }" var="rootpath"/>
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="${rootpath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
	function testa(e)
	{
		if(e.keyCode != 13)
		{
			return ;
		}
		var val = $("#tex").val();
		var vals = val.split("\n");
		//console.info(vals)
		var htmlt = "" ; 
		for(var i = 0 ; i < vals.length ; i ++ )
		{
			if(i % 2 == 0)
			{
				htmlt += "<span class='a'>" + vals[i] + "</span>";
			}else
			{
				htmlt += "<span class='b'>" + vals[i] + "</span>";
			}
			
			if(i != vals.length - 1)
			{
				htmlt += "\n";
			}
		}
		
		$("#tex").html("");
		$("#tex").append(htmlt);
		$("#text").focus();
	}
</script>
<style type="text/css">
	.a{
		font-size:15px;
		font-family:"宋体";
		background: yellow;
	}
	
	.b
	{
		font-size:15px;
		background: red;
		font-family: "黑体";
	}
</style>
</head>
<body>
	<textarea rows="5" cols="50" name="tea" id="tex" onkeyup="testa(event)"></textarea>
</body>
</html>